import React, { Component } from 'react'
import styles from './cssOne.module.css';
import styled from 'styled-components';
// props穿透
const HYinput = styled.input`
    border-color: red;
    &:focus {
        outline-color: orange;
    }
`
// 添加attrs属性
const HYinput2 = styled.input.attrs({
    placeholder: "请填写密码"
})`
    border-color: red;
    &:focus {
        outline-color: orange;
    }
`
// props可以被传递给styled组件
const HomeWrapper = styled.div`
    color: ${props => props.color}
`
export default class CssOneComponent extends Component {
    constructor() {
        super();
        this.state = {
            color: "red"
        }
    }
    render() {
        return (
            <div>
                <HYinput type="password" />
                <HYinput2 type = "password"/>
                <HomeWrapper color="orange">
                    <div>HomeWrapper</div>
                </HomeWrapper>
            </div>
        )
    }
}
